<script setup lang="ts" props>
import type { CategoryItem } from '@/types/home'
import { toRaw } from 'vue'

// 定义 props 接收数据
const props = defineProps<{
  list: CategoryItem[]
}>()
// toRaw 将 Proxy 变正常值
console.log(toRaw(props.list))
</script>

<template>
  <view class="category">
    <!-- navigator 跳转tabBar页不能带参数 要带可以用pinia来处理 -->
    <navigator
      class="category-item"
      hover-class="none"
      open-type="switchTab"
      v-for="(item, index) in list"
      :key="item.id"
      :url="`/pages/category/category?index=${index}`"
    >
      <image class="icon" :src="item.icon"></image>
      <text class="text">{{ item.name }}</text>
    </navigator>
  </view>
</template>

<style lang="scss">
@import '../styles/category.scss';
</style>
